<script setup lang="ts">
  import { ref } from 'vue'
  import { useAdministorStore } from '@/store/administor';
  import { message } from 'ant-design-vue'
  import axios from 'axios'
  import { onMounted } from 'vue';
  import type { userData } from '@/modules/manage';

  const administorStore = useAdministorStore();
  const searchData=ref({
    label:''
  })
  let tableData = ref<userData[]>([]);
  const columns = ref<any[]>([]);
  columns.value = [
    { title: '用户ID', dataIndex: 'id', key: 'id' ,width: '150px'},
    { title: '用户账号', dataIndex: 'account', key: 'account' ,width: '150px'},
    { title: '用户名', dataIndex: 'name', key: 'name' ,width: '150px'},
    { 
      title: '操作', 
      key: 'action',
      slots: { customRender: 'action' },
      width: '10%'
    }
  ];

  const getUsersData = async () => {
      const response = await administorStore.getUserList();
      tableData.value = response;
  };

  onMounted(getUsersData);

  const userDelete = async(record: userData) => {
    await axios.delete(`http://192.168.1.8:8000/deleteuser/${record.id}`);
    await getUsersData();
  }

  const resetPassword = async (record: userData) => {

  }

</script>
<template>
  <div style="flex-direction: column; background-color: rgba(240, 242, 245, 100)">
    <div class="form-head-body">
      <div style="display: flex; align-items: center;">
        <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 45vw;">
              <p><span style="color: red;">*</span><span>用户名：</span></p>
              <a-input v-model:value="searchData.label" placeholder="" style="width: 18.5vw;"/>
        </div>
      </div>
      <div style="display: flex; align-items: center;">
        <a-button type="primary" style="margin-right: 16px;">搜索</a-button>
        <a-button @click="" type="text" style="outline: 2px solid darkgray;">重置</a-button>
      </div>
    </div>
    <div class="form-head-body" style="height: 580px;">
      <a-table 
        :dataSource="tableData" 
        :columns="columns" 
        rowKey="id"
        :pagination="{ pageSize: 6 }"
        style="width: 100%;display: flex;justify-content: center;"
      >
        <template #action="{ record }">
          <a-space>
            <!-- <a-button @click="resetPassword(record)">重置密码</a-button> -->
            <a-button @click="userDelete(record)" type="primary">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="scss">
  .form-head-body{
    display: flex;
    justify-content: center;
    margin: 16px;
  }
</style>